<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <!-- LAYOUT TOPBAR COVER -->
    <div id="layout-topbar-cover">
        <div id="layout-topbar-row">
            <div id="layout-topbar-left">
                <h:link id="logo" outcome="/dashboard-banking.xhtml">
                    <img src="#{resource['olympos-layout:images/logo.svg']}" />
                </h:link>
            </div>
            <div id="layout-topbar-right">

                <a id="menu-resize-btn" class="topbar-link Animated03"><img src="#{resource['olympos-layout:images/menu-resize-btn-icon.svg']}" /></a>
                <a id="mobile-menu-btn" class="topbar-link Animated03"><img id="menu-btn-icon" src="#{resource['olympos-layout:images/menu-btn-icon.svg']}" /></a>

                <a id="" class="topbar-link Animated03 Fright"><i class="icon-user7"/></a>
                <a id="" class="topbar-link Animated03 Fright"><i class="icon-finish3"/></a>

                <div id="search-bar">
                    <!--<input type="text" placeholder="Search" />-->
                    <h:inputText id="search"/>
                    <p:watermark for="search" value="Search"/>
                    <a id="search-btn" class="Animated03"><i class="icon-zoom64"/></a>
                </div>

            </div>
        </div>
    </div>
</ui:composition>
